<!--
 * @Description: 树组件
 * @Author: chendingfengmail@163.com
 * @Date: 2021-11-10 09:49:24
 * @LastEditTime: 2021-12-31 11:17:10
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<!-- 树组件 -->
<template>
  <div class="dd-tree-box">
    <div class="box-header">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    </div>
    <div class="box-body" :style="{ height: treeHeight + 'px' }">
      <el-tree ref="ddTree" :props="{ value: 'code', label: 'name', children: 'childs', emitPath: false, }" :default-expanded-keys="expandedList" :data="treeData" highlight-current :current-node-key="currentNodeKey" node-key="code"  :expand-on-click-node="expandNode" :filter-node-method="filterNodeMethod" @node-click="handleNodeClick" @node-contextmenu="handleNodeRightClick" :default-checked-keys="['']">
        <span class="custom-tree-node span_item" slot-scope="{ node, data }">
          <span class="icon-expand" v-if="data.childs != undefined" @click="nodeExpandClick(node)">
            <i v-if="data.level == -1" class="iconfont icon-jia"></i>
            <i v-else-if="node.expanded" class="iconfont icon-jianshao"></i>
            <i v-else-if="!node.expanded" class="iconfont icon-jia"></i>
          </span>
          <span class="icon-expand" v-else @click="nodeExpandClick(node)">
            <i v-if="data.level == -1" class="iconfont icon-jianshao"></i>
            <i v-else-if="data.level == -2" :class="`iconfont icon-shipin1 ${data.deviceStatus == 0?`device-offline`:`device-online`}`" style="font-size': '12px;"></i>
            <i v-else class="iconfont icon-jianshao"></i>
          </span>
          <span class="current-node">
            <template v-if="data.level == -2">
              <el-dropdown trigger="click" @command="(command) => handleDropdownCommand(command, data)">
                <span>{{data.name}}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-caret-right" v-if="nodeCommands.includes('player') && data.deviceStatus == 1" command="player">播放视频</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-location" v-if="nodeCommands.includes('location')" command="location">定位设备</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template v-else>
              <span v-if="data.level == -1" style="font-weight: 600;">{{data.name}}</span>
              <span v-else>{{data.name}}</span>
            </template>
          </span>
          <!-- <span v-if="customTreeNodeType!=null" class="custom-node">
            <span v-if="customTreeNodeType=='deviceStatus'">
              <span v-if="node['data']['deviceStatus'] != undefined">
                <span v-if="node['data']['deviceStatus']">
                  <i style="color:#67C23A" class="el-icon-success"></i>
                </span>
                <span v-else>
                  <i style="color:#909399" class="el-icon-question"></i>
                </span>
              </span>
            </span>
          </span> -->
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dd-tree-box',
  props: {
    // 树结构数据
    treeData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 树样式
    treeStyle: {
      type: Object,
      default: () => {
        return {
          height: '48rem',
        }
      },
    },
    boxHeight: {
      type: Number,
      default: () => {
        return 0
      }
    },
    // 是否支持点击节点展开
    expandNode: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    // 自定义节点类型
    customTreeNodeType: {
      type: String,
      default: null,
    },
    // 节点点击指令集
    nodeCommands: {
      type: Array,
      default: () => {
        return []
      }
    },
    currentNodeKey: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 展开的节点
    expandedList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      filterText: '',

      treeHeight: 0,
    }
  },

  components: {},

  computed: {
  },

  created() {
    if (this.boxHeight != 0) {
      this.treeHeight = this.boxHeight
    } else {
      this.treeHeight = window.innerHeight - 230

    }
  },

  mounted() {
    // 树结构dom元素渲染完毕的回调
    this.$emit('render-down')

    if (this.boxHeight == 0) {
      this.treeHeight = window.innerHeight - 230
      window.onresize = () => {
        return (() => {
          this.treeHeight = window.innerHeight - 230
        })()
      }
    }
  },

  watch: {
    filterText(val) {
      this.$refs.ddTree.filter(val)
    },
    treeData(val) {
      this.$nextTick(() => {
        this.setTreeCurrentKey(this.currentNodeKey)
      })
    },
    currentNodeKey(val) {
      this.$nextTick(() => {
        this.setTreeCurrentKey(this.currentNodeKey)
      })
    }
  },

  methods: {
    // 设置当前树节点
    setTreeCurrentKey(key) {
      this.$refs.ddTree.setCurrentKey(key)
    },

    // 节点过滤
    filterNodeMethod(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    // 过滤节点确认回调
    filter(val) {
      this.$refs.ddTree.filter(val)
    },

    stopEventPop() {
      window.event.stopPropagation()
    },

    nodeExpandClick(node) {
      this.stopEventPop()
      this.$set(node, 'expanded', !node.expanded)
      this.$emit('node-expand-click', node)
    },

    // 点击节点的回调
    handleNodeClick(data, node, ref) {
      this.$emit('node-click', data, node, ref)
    },
    // 右键点击节点的回调
    handleNodeRightClick(event, data, node, ref) {
      this.$emit('node-contextmenu', event, data, node, ref)
    },

    // 节点下拉指令回调
    handleDropdownCommand(command, data) {
      this.$emit('dropdown-command', command, data)
    }
  },
}
</script>
<style lang='scss' scoped>
.dd-tree-box {
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  position: relative;

  .box-header {
    padding: 10px;
  }
  .box-body {
    padding: 10px;
    overflow: scroll;
    // overflow-x: hidden;
  }

  // 高亮样式
  ::v-deep
    .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: transparent;
    .current-node {
      span {
        display: inline-block;
        background-color: #409eff;
        color: #fff;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        margin-left: 5px;
      }
    }
  }
  ::v-deep .custom-tree-node {
    .icon-expand {
      display: inline-block;
      margin-right: 5px;
      i {
        font-weight: 600;
        font-size: 14px;
        color: #5eadfd;
      }
      .device-online {
        color: #5eadfd;
      }
      .device-offline {
        color: #c6c6c6;
      }
    }
  }

  ::v-deep .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
  }

  ::v-deep .el-tree {
    padding-left: 14px;
    min-width: 100%;
    .el-tree-node__label {
      width: auto;
      float: right;
      font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #3e4655;
      line-height: 25px;
      letter-spacing: 1px;
    }
    .el-tree-node__label {
      width: auto;
      float: right;
      font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #3e4655;
      line-height: 25px;
      letter-spacing: 1px;
    }
    .el-tree-node__content {
      padding-left: 14px !important;
      height: 22px;
      line-height: 21px;
      .el-tree-node__expand-icon {
        font-size: 20px;
      }
      .el-checkbox {
        .el-checkbox__input {
          .el-checkbox__inner {
            width: 20px;
            height: 20px;
          }
          .el-checkbox__inner::after {
            height: 11px;
            left: 6px;
            width: 5px;
          }
          .el-checkbox__inner::before {
            top: 8px;
          }
        }
      }
    }

    .el-tree > .el-tree-node {
      display: inline-block;
      min-width: 100%;
    }

    // 设置线
    .el-tree-node {
      position: relative;
      padding-left: 0px !important;
      padding-bottom: 6px;
    }
    .el-tree-node__children {
      padding-left: 26px;
    }
    .el-tree-node :last-child:before {
      height: 29px;
    }
    .el-tree > .el-tree-node:before {
      border-left: none;
    }
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .tree :first-child .el-tree-node:before {
      border-left: none;
    }
    //竖直的虚线
    .el-tree-node:before {
      content: '';
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
    //水平的虚线
    .el-tree-node:after {
      content: '';
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:before {
      border-left: 1px solid #4386c6; //指示线的样式和颜色粗细
      bottom: 0px;
      height: 100%;
      top: -17px;
      width: 1px;
    }

    .el-tree-node:after {
      border-top: 1px solid #4386c6; //指示线的样式和颜色粗细
      height: 20px;
      top: 11px;
      width: 16px;
    }

    //修改原本点击展开或收起图标会旋转的样式
    .el-tree .el-tree-node__expand-icon.expanded {
      display: none;
    }
    .slot-t-node span {
      color: #333;
      font-size: 14px;
      font-family: 'Microsoft YaHei' !important;
    }
    .el-tree-node__expand-icon {
      display: none;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {
      padding: 0px !important;
    }
  }
}

/* 一开始隐藏 */
.box-body::-webkit-scrollbar {
  display: none;
}

/* 鼠标经过再显示 */
.box-body:hover::-webkit-scrollbar {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  background-color: #fff;
  border-radius: 0.625rem;
}

.box-body::-webkit-scrollbar-thumb {
  background-color: rgba(134, 191, 250, 0.7);
  border-radius: 0.625rem;
}
</style>